<template>
	<view class="welcome-box">
		<NavbarRegister></NavbarRegister>
		<view class="load-main">
			<view class="load-box">
				<view class="load-input">
					<input type="text" placeholder-class="load-place" placeholder="请输入邮箱" v-model="email" />
				</view>
				<view class="load-input">
					<input type="text" placeholder-class="load-place" password="true" placeholder="请输入密码"
						v-model="password" />
				</view>
				<view class="load-input">
					<input type="text" placeholder-class="load-place" placeholder="请输入用户名" v-model="username" />
				</view>
				<view class="load-input">
					<input type="text" placeholder-class="load-place" placeholder="请输入手机号" v-model="phone" />
				</view>
				<view class="load-input">
					<input type="text" placeholder-class="load-place" class="code-input" maxlength="6"
						placeholder="请输入验证码" v-model="code" />
					<button type="default" class="code-btn" v-bind:disabled="btndisabled"
						@tap="getcode()">{{btnstr}}</button>
				</view>

				<view class="load-button">
					<button class="load-button-style" type="primary" @tap="checkregister()">登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//加载顶部导航搜索栏 1、引用组件
	import NavbarRegister from "../../uni_modules/navbar/navbar_register.vue"

	export default {
		data() {
			return {
				email: '',
				password: '',
				username: '',
				phone: '',
				code: '',
				btnstr: '获取验证码',
				btndisabled: false,
			}
		},
		methods: {
			//注册
			checkregister() {
				uni.request({
					url: 'http://localhost:8081/api/user/register',
					method:'POST',
					data: {
						email: this.email,
						password: this.password,
						username: this.username,
						phone: this.phone,
						code: this.code,
					},
					success: (res) => {
						if (res.data.success == true) {
							uni.showToast({
								title: '注册成功', //显示的文字
								icon: 'success' //显示的图标
							});

							uni.setStorageSync('username', res.data.email + '');
							uni.setStorageSync('password', res.data.password + '');

							//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
							uni.switchTab({
								url: '../tabbor/index/index'
							});
						} else {
							uni.showToast({
								title: '注册失败，请重试',
								icon: 'none'
							})
						}
					}
				});
			},

			//倒计时
			timewait(t) {
				//保留原本的 this
				const _this = this;
				setTimeout(function() {
					if (t >= 0) {
						_this.btnstr = t + '秒后点击';
						t--;
						//递归调用的函数
						_this.timewait(t);
					} else {
						_this.btnstr = '获取验证码';
						t = 60;
						_this.btndisabled = false;
					}
				}, 1000)
			},

			//验证码获取
			getcode() {
				uni.request({
					url: 'http://localhost:8081/api/mail/sendRegisterCode/' + this.email,
				});
				this.btndisabled = true;
				this.timewait(60);
			}
		},

		mounted() {

		},

		//加载顶部导航栏 2、组件注入的形式NavbarSpot
		components: {
			NavbarRegister,
		}
	}
</script>

<style lang="scss">
	.load-main {
		display: flex;
		justify-content: center; //主轴上的内容居中对齐
		align-items: center; //垂直居中
		flex-direction: column; //垂直排列
		flex: 1; //宽度充满全屏
		overflow: hidden; //超出部分隐藏
	}

	.load-box {
		display: flex;
		width: 90%;
		height: 330px;
		flex-direction: column; //主轴上的内容列方向排布	
		justify-content: space-between; //平均分布
		padding-top: 15px;
	}

	.load-input {
		display: flex;
		border: 1px solid #cccccc;
		height: 40px;
		align-items: center; //交叉轴方向的居中对齐
		padding-left: 10px;
	}
	
	.code-input {
		width: 65%;
	}
	
	.code-btn {
		font-size: 13px;
		color: #007AFF;
		background-color: Transparent;
		border: none; //无边框
		outline: none; //获得焦点也无边框
	}

	.load-place {
		font-size: 15px;
	}
</style>
